import React, { useState } from 'react';
import NoUiSlider from '../../components/NoUiSlider';
import './styles.css';

const ColorPicker = () => {
  const [colors, setColors] = useState({
    red: 127,
    green: 127,
    blue: 127
  });

  const handleChange = (values, color) => {
    setColors(prev => ({
      ...prev,
      [color]: Number(values[0])
    }));
  };

  const handleEnd = (values, color) => {
    console.log(`${color}滑块结束时的值:`, values[0]);
    console.log(`${color}滑块范围:`, {
      min: 0,
      max: 255,
      current: values[0]
    });
  };

  const backgroundColor = `rgb(${colors.red}, ${colors.green}, ${colors.blue})`;

  return (
    <div className="color-picker-container">
      <h2>Color Picker Example</h2>
      <div className="color-picker">
        <div className="color-sliders">
          <div className="slider-container">
            <NoUiSlider
              start={[colors.red]}
              connect={[true, false]}
              orientation="vertical"
              direction="rtl"
              range={{
                min: 0,
                max: 255
              }}
              tooltips={true}
              onChange={(values) => handleChange(values, 'red')}
              onEnd={(values) => handleEnd(values, 'red')}
            />
            <div className="color-label">R</div>
          </div>
          <div className="slider-container">
            <NoUiSlider
              start={[colors.green]}
              connect={[true, false]}
              orientation="vertical"
              direction="rtl"
              range={{
                min: 0,
                max: 255
              }}
              tooltips={true}
              onChange={(values) => handleChange(values, 'green')}
              onEnd={(values) => handleEnd(values, 'green')}
            />
            <div className="color-label">G</div>
          </div>
          <div className="slider-container">
            <NoUiSlider
              start={[colors.blue]}
              connect={[true, false]}
              orientation="vertical"
              direction="rtl"
              range={{
                min: 0,
                max: 255
              }}
              tooltips={true}
              onChange={(values) => handleChange(values, 'blue')}
              onEnd={(values) => handleEnd(values, 'blue')}
            />
            <div className="color-label">B</div>
          </div>
        </div>
        <div className="color-preview" style={{ backgroundColor }}>
          <div className="color-values">
            <div>R: {colors.red}</div>
            <div>G: {colors.green}</div>
            <div>B: {colors.blue}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ColorPicker; 